<script setup>
const dataList = ref({});
const { data } = await $fetch(`/api/down?type=professional`);
dataList.value = data;
</script>
<template>
  <div v-for="item in dataList.subMenus">
    <div class="text-[16px] font-bold mt-[20px]">
      {{ item.subMenuName }}
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-[30px] mt-[20px]">
      <div
        v-for="hot in item.hotProducts"
        class="h-[350px] bg-[#fff] rounded-[20px] flex flex-col justify-center items-center"
      >
        <div class="font-bold">{{ hot.name }}</div>
        <img :src="hot.imageUrl" class="h-[180px] my-[10px]" />
        <a
          class="h-[30px] w-[120px] text-[#fff] rounded-[20px] leading-[30px] text-center bg-[#444]"
          href="#"
          >相关软件下载</a
        >
        <a class="mt-[20px]" href="#">相关文档下载</a>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
